<template>
	<view class="main">
		<u-navbar :is-back="true" title="单品活动" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="tab">
			<view :class="tab==1?'tabs':'tabsed'" @click="change(1)">
				<text>进行中</text>
				<view v-if="tab==1"
					style="width: 40rpx;height: 4rpx;background: #FF0000; position: absolute; top: 86rpx;">
				</view>
			</view>
			<view style="width:4rpx;height: 30rpx; background-color: #c3c3c3;">
			</view>
			<view :class="tab==2?'tabs':'tabsed'" @click="change(2)">
				<text>已过期</text>
				<view v-if="tab==2"
					style="width: 40rpx;height: 4rpx;background: #FF0000; position: absolute; top: 86rpx;">
				</view>
			</view>
		</view>
		<block v-if="tab==1">
			<view class="allshop">
				<view class="shop" v-for="(item,index) in singlelist.conduct" :key="index">
					<view class="time">
						{{item.start_time}}至 {{item.end_time}}
					</view>
					<view class="details">
						<image :src="item.good_info[0].image" mode=""></image>
						<view class="details_r">
							<view class="cont">
								<view class="title">
									{{item.good_info[0].name}}
								</view>
								<text>库存{{item.kucun}}</text>
							</view>
							<view class="grams">
								{{item.specs}}
							</view>
							<view class="money">
								<view class="original">
									原价：¥{{item.yj}}
								</view>
								<view class="current">
									活动价：¥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="tab==2">
			<view class="allshop">
				<view class="shop" v-for="(item,index) in singlelist.expire" :key="index">
					<view class="expireds">
						已过期
					</view>
					<view class="details">
						<image :src="item.good_info[0].image" mode=""></image>
						<view class="details_r">
							<view class="cont">
								<view class="title">
									{{item.good_info[0].name}}
								</view>
								<text>库存{{item.kucun}}</text>
							</view>
							<view class="grams">
								{{item.specs}}
							</view>
							<view class="money">
								<view class="original">
									原价：¥{{item.yj}}
								</view>
								<view class="current">
									活动价：¥{{item.price}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="confirm" v-if="tab==1" @click="router">
			新建活动
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				type: '',
				tab: 1,
				singlelist: [],


			}
		},
		onLoad() {
			this.getonlylist()
		},
		mounted() {

		},
		onShow() {},
		methods: {
			//切换列表
			change(index) {
				if (index == 1) {
					this.tab = 1
				} else if (index == 2) {
					this.tab = 2
				}
			},
			//跳转至添加单品活动
			router() {
				uni.navigateTo({
					url: '../new_single/new_single'
				})
			},
			//获取单品活动列表
			getonlylist() {
				global.$http.request({
					url: '/shopapi/activity/singList',
					data: {
						token: uni.getStorageSync('token')
					},
				}).then(res => {
					if (res.data.code == 200) {
						this.singlelist = res.data.data
						console.log('单品活动列表', res.data.data);
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.tab {
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-around;
				position: relative;

				.tabs {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF0000;
					width: 300rpx;

					text {
						padding: 31rpx 0;
					}
				}

				.tabsed {
					width: 300rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000;

					text {
						padding: 31rpx 0;
					}
				}
			}

			.allshop {
				margin-bottom: 180rpx;

				.shop {
					width: 750rpx;
					background: #FFFFFF;
					padding: 29rpx 27rpx;
					margin-bottom: 4rpx;

					.expireds {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
						padding-bottom: 27rpx;
					}

					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF0000;
						padding-bottom: 29rpx;
					}

					.details {
						display: flex;

						image {
							width: 180rpx;
							height: 180rpx;
						}

						.details_r {
							width: 500rpx;
							padding-left: 26rpx;

							.cont {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.title {
									font-size: 28rpx;
									font-weight: 400;
									color: #000000;
								}

								text {
									font-size: 20rpx;
									font-weight: 400;
									color: #7F7F7F;
								}
							}

							.grams {
								font-size: 24rpx;
								font-weight: 400;
								color: #666666;
								padding: 21rpx 0 55rpx 0;
							}

							.money {
								display: flex;
								justify-content: space-between;
								align-items: center;

								.original {
									font-size: 24rpx;
									font-weight: 400;
									text-decoration: line-through;
									color: #666666;
								}

								.current {
									font-size: 24rpx;
									font-weight: 400;
									color: #010101;
								}
							}

						}
					}
				}
			}

			.confirm {
				position: fixed;
				bottom: 0;
				margin-top: 100rpx;
				width: 750rpx;
				text-align: center;
				padding: 34rpx 0;
				background: #FE4E00;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
